import React, { useState, useEffect, useRef } from 'react';
import { Button, Flex } from 'antd';
import { PaperClipOutlined } from '@ant-design/icons';
import { Attachments, Prompts, Sender } from '@ant-design/x';
import '../styles/styles.css';
import { SENDER_PROMPTS_DATA } from '../utils/constants';

interface ChatSenderProps {
  loading: boolean;
  onSubmit: (value: string) => void;
  onCancel: () => void;
}

export const ChatSender: React.FC<ChatSenderProps> = ({ loading, onSubmit, onCancel }) => {
  const [inputValue, setInputValue] = useState('');
  const [attachmentsOpen, setAttachmentsOpen] = useState(false);
  const [attachedFiles, setAttachedFiles] = useState<any[]>([]);
  const [isFocused, setIsFocused] = useState(false);

  // 转换数据格式，添加图标
  const senderPromptsWithIcons = SENDER_PROMPTS_DATA.map(item => {
    const iconMap: Record<string, React.ReactNode> = {
      ScheduleOutlined: <span>📅</span>,
      ProductOutlined: <span>📦</span>,
      FileSearchOutlined: <span>🔍</span>,
      AppstoreAddOutlined: <span>➕</span>,
    };
    return {
      ...item,
      icon: iconMap[item.iconName] || <span>📋</span>,
    };
  });

  // 处理输入框焦点事件
  const handleInputFocus = () => {
    setIsFocused(true);
  };

  const handleInputBlur = () => {
    setIsFocused(false);
  };

  const senderHeader = (
    <Sender.Header
      title="Upload File"
      open={attachmentsOpen}
      onOpenChange={setAttachmentsOpen}
      styles={{ content: { padding: 0 } }}
    >
      <Attachments
        beforeUpload={() => false}
        items={attachedFiles}
        onChange={(info) => setAttachedFiles(info.fileList)}
        placeholder={(type) =>
          type === 'drop'
            ? { title: 'Drop file here' }
            : {
                icon: <span>📁</span>,
                title: 'Upload files',
                description: 'Click or drag files to this area to upload',
              }
        }
      />
    </Sender.Header>
  );

  return (
    <>
      {/* 🌟 提示词 */}
      <Prompts
        items={senderPromptsWithIcons}
        onItemClick={(info) => {
          onSubmit(info.data.description as string);
        }}
        styles={{
          item: { padding: '6px 12px' },
        }}
        className="senderPrompt"
      />
      {/* 🌟 输入框 */}
      <Sender
        value={inputValue}
        header={senderHeader}
        onSubmit={() => {
          onSubmit(inputValue);
          setInputValue('');
        }}
        onChange={setInputValue}
        onCancel={onCancel}
        prefix={
          <Button
            type="text"
            icon={<PaperClipOutlined style={{ fontSize: 18 }} />}
            onClick={() => setAttachmentsOpen(!attachmentsOpen)}
          />
        }
        loading={loading}
        className={`sender ${isFocused ? 'sender-focused' : ''}`}
        allowSpeech
        actions={(_, info) => {
          const { SendButton, LoadingButton, SpeechButton } = info.components;
          return (
            <Flex gap={4}>
              <SpeechButton className="speechButton" />
              {loading ? <LoadingButton type="default" /> : <SendButton type="primary" />}
            </Flex>
          );
        }}
        placeholder="Ask or input / use skills"
        onFocus={handleInputFocus}
        onBlur={handleInputBlur}
      />
    </>
  );
};
